<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field['options'].displayStyle"
  >
    <div class="scene-waiting-drugstore-patient-widget">
      <div class="widget-inside" :style="getStyle('area')">
        <div class="flex-box">
          <div class="flex-box-left queue-area item">
            <template v-if="true">
              <div
                  :style="getStyle('head')"
                  class="header-area"
              >
                <template v-for="item in (optionsInfo.queueInfo.colOptions)">
                  <div
                      class="item"
                      :class="getClassName(item.value)"
                      v-if="getColShow(item.value)"
                      :style="setFlex(item,'head')"
                  >
                    {{ item.label }}
                  </div>
                </template>
              </div>
              <div
                  class="list-area"
                  :style="getStyle('list')"
              >
                <template v-if="queueScroll">
                  <vue-seamless-scroll
                      class="scroll"
                      :ref="`scroll`"
                      :key="widgetKey"
                      :classOption="queueOption"
                      :data="waitPatientListFlatten"
                  >
                    <template v-for="(item, index) in waitingPatientInfos">
                      <div class="queue-item">
                        <template
                            v-for="items in optionsInfo.queueInfo.colOptions"
                        >
                          <template v-if="getColShow(items.value)">
                            <div
                                class="item"
                                :class="getClassName(items.value)"
                                :style="setFlex(items, 'list')"
                            >
                              <template
                                  v-if="
                                items.value !== 'treatingPatient' &&
                                items.value !== 'waitPatientList'
                              "
                              >
                                <div
                                    class="item-inside-default"
                                    :class="{
                                  'item-inside': optionsInfo.itemShadow,
                                }"
                                >
                                  <!--人数-->
                                  <template
                                      v-if="
                                    items.value === 'waitPatientCount' ||
                                    items.value === 'treatmentRoomNumber'
                                  "
                                  >
                                    <div class="scroll-item-inside">
                                      {{ item[items.value] || "\u00a0" }}
                                    </div>
                                  </template>
                                  <!--除了人数-->
                                  <template v-else>
                                    <div
                                        :data-value="item[items.value]"
                                        :class="`${items.value}-wrap-info`"
                                    >
                                      <template
                                          v-if="items.value === 'registerObjNames'"
                                      >
                                        <ScrollX
                                            :key="`${item[items.value]}-${index}}`"
                                            :speed="
                                          optionsInfo['listSpeed'] > 15
                                            ? 15
                                            : optionsInfo['listSpeed']
                                        "
                                        >
                                          {{ getColContent(item, items.value) }}
                                        </ScrollX>
                                      </template>
                                      <template
                                          v-if="items.value !== 'registerObjNames'"
                                      >
                                        <ScrollX
                                            :key="`${item[items.value]}-${index}}`"
                                            :speed="
                                          optionsInfo['listSpeed'] > 15
                                            ? 15
                                            : optionsInfo['listSpeed']
                                        "
                                        >
                                          {{ getColContent(item, items.value) }}
                                        </ScrollX>
                                      </template>
                                    </div>
                                  </template>
                                </div>
                              </template>
                              <template v-if="items.value === 'treatingPatient'">
                              <span class="treating-patient-area">
                                <ScrollEditX
                                    :content="getCurrentPatient(item) || ''"
                                    :key="`${item[items.value]}`"
                                />
                              </span>
                              </template>
                              <template v-if="items.value === 'waitPatientList'">
                                <template v-if="optionsInfo.openScroll">
                                  <vue-seamless-scroll
                                      :ref="`scroll-${item.workerId}`"
                                      class="scroll"
                                      :key="widgetKey"
                                      @ScrollEnd="(e) => handleScrollEnd(e, item)"
                                      :class-option="waitPatienOption"
                                      :data="item.waitPatientList"
                                  >
                                    <div
                                        class="inside-content"
                                        :class="{
                                      patient_space:
                                        optionsInfo['patientSpace'],
                                    }"
                                    >
                                    <span
                                        class="patient"
                                        v-for="(
                                        item, index
                                      ) in item.waitPatientList"
                                        :key="`${item.queuingId || index}-${
                                        item.patientIdNo || index
                                      }`"
                                        v-html="getWaitingContent(item)"
                                    />
                                    </div>
                                  </vue-seamless-scroll>
                                </template>
                                <template v-else>
                                  <div class="no-scroll">
                                    <div class="inside-content">
                                    <span
                                        class="patient"
                                        v-for="(
                                        item, index
                                      ) in item.waitPatientList"
                                        v-html="getWaitingContent(item)"
                                        :key="`${item.queuingId || index}-${
                                        item.patientIdNo || index
                                      }-${index}`"
                                    />
                                    </div>
                                  </div>
                                </template>
                              </template>
                            </div>
                          </template>
                        </template>
                      </div>
                    </template>
                  </vue-seamless-scroll>
                </template>

                <template v-else>
                  <template v-for="(item, index) in waitingPatientInfos">
                    <div class="queue-item">
                      <template v-for="items in optionsInfo.queueInfo.colOptions">
                        <template v-if="getColShow(items.value)">
                          <div
                              class="item"
                              :class="getClassName(items.value)"
                              :style="setFlex(items, 'list')"
                          >

                            <template v-if="items.value === 'treatingPatient'">
                              <div class="treating-patient-area">
                                <ScrollEditX
                                    :content="getCurrentPatient(item) || ''"
                                    :key="`${item[items.value]}`"
                                />
                              </div>
                            </template>
                            <template v-else-if="items.value === 'waitPatientList'">
                              <template v-if="optionsInfo.openScroll">
                                <vue-seamless-scroll
                                    :ref="`scroll-${item.workerId}`"
                                    class="scroll"
                                    :key="widgetKey"
                                    @ScrollEnd="(e) => handleScrollEnd(e, item)"
                                    :class-option="waitPatienOption"
                                    :data="item.waitPatientList"
                                >
                                  <div
                                      class="inside-content"
                                      :class="{ patient_space: optionsInfo['patientSpace'],}"
                                  >
                                    <template v-for="(item) in item.waitPatientList">
                                       <span
                                           class="patient"
                                           v-html="getWaitingContent(item)"
                                       />
                                    </template>
                                  </div>
                                </vue-seamless-scroll>
                              </template>
                              <template v-else>
                                <div class="no-scroll">
                                  <div class="inside-content">
                                    <template v-for="(item) in item.waitPatientList">
                                       <span
                                           class="patient"
                                           v-html="getWaitingContent(item)"
                                       />
                                    </template>
                                  </div>
                                </div>
                              </template>
                            </template>
                            <template v-else>
                              <div
                                  class="item-inside-default"
                                  :class="{ 'item-inside': optionsInfo.itemShadow }"
                              >
                                <!--人数&诊室号-->
                                <template
                                    v-if="
                                  items.value === 'waitPatientCount' ||
                                  items.value === 'treatmentRoomNumber'
                                "
                                >
                                  <div class="scroll-item-inside">
                                    {{ item[items.value] || "\u00a0" }}
                                  </div>
                                </template>
                                <!--除了人数-->
                                <template v-else>
                                  <div
                                      :data-value="item[items.value]"
                                      :class="`${items.value}-wrap-info`"
                                  >
                                    <template
                                        v-if="items.value === 'registerObjNames'"
                                    >
                                      <ScrollX
                                          :key="`${item[items.value]}-${index}}`"
                                          :speed="
                                        optionsInfo['listSpeed'] > 15
                                          ? 15
                                          : optionsInfo['listSpeed']
                                      "
                                      >
                                        {{ getColContent(item, items.value) }}
                                      </ScrollX>
                                    </template>
                                    <template
                                        v-if="items.value !== 'registerObjNames'"
                                    >
                                      <ScrollX
                                          :key="`${item[items.value]}-${index}}`"
                                          :speed="
                                        optionsInfo['listSpeed'] > 15
                                          ? 15
                                          : optionsInfo['listSpeed']
                                      "
                                      >
                                        {{ getColContent(item, items.value) }}
                                      </ScrollX>
                                    </template>
                                  </div>
                                </template>
                              </div>
                            </template>
                          </div>
                        </template>
                      </template>
                    </div>
                  </template>
                </template>
              </div>
            </template>
          </div>
          <div class="flex-box-right wait-area item" v-if="true">
            <div class="layer-blue-area" v-if="showLayer">
              <div class="patient-name">
                {{ layerInfo.currPatient[0]?.patientName }}
              </div>
              <div class="treatment-room-name">
                请到 {{ layerInfo.treatmentRoomName }} 取药
              </div>
            </div>
            <div class="header-area" :style="getStyle('patientHead')">
              <div class="header-item">
                {{ optionsInfo?.patientInfo?.header || "候诊患者" }}
              </div>
            </div>
            <div class="wait-patient-list">
              <div class="content-area-left">
                <div class="title">中药</div>
                <div
                    class="content-area"
                    :style="getStyle('patientList')"
                    :key="`patient_${widgetKey}`"
                    :data-key="`patient_${widgetKey}`"
                >
                  <template v-if="true">
                    <vue-seamless-scroll
                        class="scroll"
                        :ref="`scroll-${widgetKey}`"
                        :classOption="scrollOption(patientListScroll)"
                        :data="waitPatientListFlatten"
                    >
                      <div class="scroll-inside">
                        <template
                            v-for="groupItem in waitingPatientSummaryInfos"
                        >
                          <div class="group-info">
                            <template v-for="chunk in groupItem">
                              <div class="patient-item">
                                {{ chunk?.orderNo || " " }}
                                {{ chunk?.patientName || " " }}
                              </div>
                            </template>
                          </div>
                        </template>
                      </div>
                    </vue-seamless-scroll>
                  </template>
                </div>
              </div>

              <div class="content-area-right">
                <div class="title">西药</div>
                <div
                    class="content-area"
                    :style="getStyle('patientList')"
                    :key="`patient_${widgetKey}`"
                    :data-key="`patient_${widgetKey}`"
                >
                  <template v-if="true">
                    <vue-seamless-scroll
                        class="scroll"
                        :ref="`scroll-${widgetKey}`"
                        :classOption="scrollOptionWest(patientListScrollWest)"
                        :data="waitPatientListFlattenWest"
                    >
                      <div class="scroll-inside">
                        <template
                            v-for="groupItem in waitingPatientSummaryInfosWest"
                        >
                          <div class="group-info">
                            <template v-for="chunk in groupItem">
                              <div class="patient-item">
                                {{ chunk?.orderNo || " " }}
                                {{ chunk?.patientName || " " }}
                              </div>
                            </template>
                          </div>
                        </template>
                      </div>
                    </vue-seamless-scroll>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {v4 as uuid} from "uuid";
import {pxToVw} from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import {buildParentApi} from "@/utils/designer/util";
import vueSeamlessScroll from "vue-seamless-scroll";
import ScrollEditX from "@c/public/seamlessScroll/ScrollEditX.vue";

let buildParent = buildParentApi();
export default {
  name: "scene-waiting-drugstore-patient2-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollEditX,
    CompOperate,
    ScrollX,
    vueSeamlessScroll,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
  },

  data() {
    return {
      showLayer: false,
      layerInfo: {
        currPatient: [],
        treatmentRoomName: "",
      },
      week: "",
      widgetKey: uuid(),
      mockOpen: false,
      optionsInfo: Object(),
    };
  },

  computed: {
    // 队列的滚动
    queueOption() {
      let {
        scrollNumber = 6,
        scrollStep = 1,
        scroll = true,
      } = this.optionsInfo.queueInfo;
      let waitingPatientInfos = this.waitingPatientInfos;
      const resultArr = waitingPatientInfos.filter(
          (item) => !this.$lodash.isEmpty(item)
      );
      return {
        hoverStop: true,
        direction: 1, // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][scrollStep - 1], // 数值越大速度滚动越快
        limitMoveNum:
            scroll &&
            resultArr.length >= scrollNumber &&
            waitingPatientInfos.length >= scrollNumber
                ? scrollNumber
                : 999999, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 中药候诊的滚动
    scrollOption() {
      return function (row) {
        let {
          scrollNumber = 10,
          eastScroll = false,
          eastScrollStep = 1,
          showRowNums = 5,
          showColNums = 2,
        } = this.optionsInfo.patientInfo;
        let waitPatientListFlatten = this.waitPatientListFlatten;
        const resultArr = waitPatientListFlatten.filter(
            (item) => !this.$lodash.isEmpty(item)
        );
        let total = showRowNums * showColNums;
        return {
          direction: 1, // 0向下 1向上 2向左 3向右
          hoverStop: true,
          openTouch: false,
          isSingleRemUnit: true,
          step: [1, 1.5, 2, 2.5, 3][eastScrollStep - 1], // 数值越大速度滚动越快
          limitMoveNum:
              row && eastScroll &&
              resultArr.length >= total &&
              waitPatientListFlatten.length >= total
                  ? scrollNumber
                  : 999999, // 开始无缝滚动的数据量 this.dataList.length
        };
      }
    },

    // 西药候诊的滚动
    scrollOptionWest() {
      return function (row) {
        let {
          scrollNumber = 10,
          westScrollStep = 1,
          westScroll = true,
          showRowNums = 5,
          showColNums = 2,
        } = this.optionsInfo.patientInfo;
        let waitPatientListFlattenWest = this.waitPatientListFlattenWest;
        const resultArr = waitPatientListFlattenWest.filter(
            (item) => !this.$lodash.isEmpty(item)
        );
        let total = showRowNums * showColNums;
        return {
          direction: 1, // 0向下 1向上 2向左 3向右
          hoverStop: true,
          openTouch: false,
          isSingleRemUnit: true,
          step: [1, 1.5, 2, 2.5, 3][westScrollStep - 1], // 数值越大速度滚动越快
          limitMoveNum:
              row && westScroll &&
              resultArr.length >= total &&
              waitPatientListFlattenWest.length >= total
                  ? scrollNumber
                  : 999999, // 开始无缝滚动的数据量 this.dataList.length
        };
      }
    },

    // 左侧-候诊患者滚动
    waitPatienOption() {
      let {
        waitScroll = true,
        waitScrollNumber = 3,
        waitScrollStep = 1,
      } = this.optionsInfo?.patientInfo;
      return {
        direction: 2, // 0向下 1向上 2向左 3向右
        hoverStop: true,
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][waitScrollStep - 1], // 数值越大速度滚动越快
        limitMoveNum: waitScroll ? waitScrollNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 中药候诊患者数据拍平
    waitPatientListFlatten() {
      return this.$lodash.flattenDeep(this.waitingPatientSummaryInfos);
    },

    // 西药候诊患者拍平
    waitPatientListFlattenWest() {
      return this.$lodash.flattenDeep(this.waitingPatientSummaryInfosWest);
    },

    // 候诊患者队列滚动判断
    queueScroll() {
      let {scrollNumber = 5, scroll = true} = this.optionsInfo.queueInfo;
      let waitingPatientInfos = this.waitingPatientInfos;
      const resultArr = waitingPatientInfos.filter(
          (item) => !this.$lodash.isEmpty(item)
      );
      console.log(scroll && resultArr.length >= scrollNumber);
      return scroll && resultArr.length >= scrollNumber;
    },

    // 中药候诊患者队列滚动判断
    patientListScroll() {
      let {
        eastScroll = false,
        showRowNums = 5,
        showColNums = 2,
      } = this.optionsInfo.patientInfo;
      let waitPatientListFlatten = this.waitPatientListFlatten;
      const resultArr = waitPatientListFlatten.filter(
          (item) => !this.$lodash.isEmpty(item)
      );
      let total = showRowNums * showColNums;
      return eastScroll && resultArr.length >= total;
    },

    // 西药患者队列滚动判断
    patientListScrollWest() {
      let {
        westScroll = false,
        showRowNums = 5,
        showColNums = 2,
      } = this.optionsInfo.patientInfo;
      let waitPatientListFlattenWest = this.waitPatientListFlattenWest;
      const resultArr = waitPatientListFlattenWest.filter(
          (item) => !this.$lodash.isEmpty(item)
      );
      let total = showRowNums * showColNums;
      return westScroll && resultArr.length >= total;
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        switch (val) {
          case "area":
            Reflect.set(Obj, "height", pxToVw(info.areaHeight));
            return Obj;
          case "list":
            Reflect.set(Obj, "background", info.queueInfo.listBackground);
            return Obj;
          case "head":
            Reflect.set(Obj, "fontWeight", info.queueInfo.headFontWeight);
            Reflect.set(Obj, "fontSize", pxToVw(info.queueInfo.headerFontSize));
            return Obj;
          case "queueItem":
            Reflect.set(Obj, "fontWeight", info.queueInfo.listFontWeight);
            Reflect.set(Obj, "color", info.queueInfo.listColor);
            Reflect.set(Obj, "background", info.queueInfo.listBackground);
            Reflect.set(Obj, "fontSize", pxToVw(info.queueInfo.listFontSize));
            return Obj;
          case "patientHead":
            Reflect.set(
                Obj,
                "fontSize",
                pxToVw(info?.patientInfo?.headerFontSize)
            );
            Reflect.set(Obj, "color", `${info?.patientInfo?.headerColor}`);
            // Reflect.set(Obj, 'background', `${(info?.patientInfo?.headerBackground)}`);
            Reflect.set(
                Obj,
                "fontWeight",
                `${info?.patientInfo?.headerFontWeight}`
            );
            return Obj;
          case "patientList":
            Reflect.set(
                Obj,
                "fontSize",
                pxToVw(info?.patientInfo?.listFontSize)
            );
            Reflect.set(Obj, "color", `${info?.patientInfo?.listColor}`);
            Reflect.set(
                Obj,
                "fontWeight",
                `${info?.patientInfo?.listFontWeight}`
            );
            return Obj;
        }
      };
    },

    // 栏目是否显示
    getColShow() {
      return function (val) {
        const self = this;
        let {defaultShowCol} = self.optionsInfo.queueInfo || Array();
        return defaultShowCol.includes(val);
      };
    },

    // 患者的ClassName
    getClassName() {
      return function (val) {
        switch (val) {
          case "treatmentRoomNumber":
            return "room-number"
          case "treatingPatient":
            return "current-patient";
          case "waitPatientList":
            return "wait-patient";
          case "waitPatientCount":
            return "patient-count";
          case "registerObjNames":
            return "register-name";
          case "deptName":
            return "deptName-name";
        }
      };
    },

    // 候诊队列数据
    waitingPatientInfos() {
      let devType = this.devType;
      let {showRowNums = 5, queueInfo} = this.optionsInfo;
      let WaitingPatientList = this.$store.getters["getWaitingPatientInfo"];
      let tempList = devType? (WaitingPatientList.apiData):(WaitingPatientList.mockData);
      if (queueInfo.scroll) {
        if (tempList.length > showRowNums) {
          return [...tempList];
        } else {
          let arr = new Array(showRowNums - tempList.length).fill({});
          return [...tempList, ...arr];
        }
      } else {
        //   不滚动
        if (tempList.length > showRowNums) {
          let sliceArr = tempList.slice(0, showRowNums);
          return [...sliceArr];
        } else {
          let arr = new Array(showRowNums - tempList.length).fill({});
          return [...tempList, ...arr];
        }
      }
    },

    //等待就诊的患者
    waitingPatientSummaryInfos() {
      let devType = this.devType;
      let {patientInfo} = this.optionsInfo;
      let WaitingPatientList = this.$store.getters["getWaitingPatienttAllInfo"];
      let westernMedicineQueue = [];
      let traditionalMedicineQueue = [];
      let tempList = Array();
      if (devType) {
        tempList = WaitingPatientList.apiData;
      } else {
        tempList = WaitingPatientList.mockData;
      }
      tempList.forEach((item) => {
        if (item.registerObjSimpleName === "西药") {
          westernMedicineQueue.push(item);
        } else if (item.registerObjSimpleName === "中药") {
          traditionalMedicineQueue.push(item);
        }
      });
      let summary = this.$lodash.map(
          traditionalMedicineQueue,
          "waitPatientList"
      );
      let flattenArr = this.$lodash.flattenDeep(summary);
      let uniqByArr = this.$lodash.uniqBy(flattenArr, "queuingId");
      let patientNumber =
          (patientInfo.showColNums || 2) * (patientInfo.showRowNums || 5);
      // 滚动状态
      if (patientInfo.eastScroll) {
        if (uniqByArr?.length >= patientNumber) {
          let remainder =
              (uniqByArr.length - patientNumber) % patientInfo.showColNums;
          if (!!remainder) {
            let number =
                patientInfo.showColNums - remainder > 0
                    ? patientInfo.showColNums - remainder
                    : 0;
            let arr = new Array(number).fill({});
            let flattenArr2 = [...uniqByArr, ...arr];
            return this.$lodash.chunk(
                flattenArr2,
                patientInfo.showColNums || 2
            );
          } else {
            let flattenArr2 = [...uniqByArr];
            return this.$lodash.chunk(
                flattenArr2,
                patientInfo.showColNums || 2
            );
          }
        } else {
          let arr = new Array(patientNumber - uniqByArr?.length).fill({});
          let flattenArr2 = [...uniqByArr, ...arr];
          return this.$lodash.chunk(flattenArr2, patientInfo.showColNums);
        }
      } else {
        // 非滚动状态--数据足够
        if (uniqByArr?.length > patientNumber) {
          let sliceArr = uniqByArr.slice(0, patientNumber);
          return this.$lodash.chunk(sliceArr, patientInfo.showColNums || 2);
        } else {
          // 非滚动状态--数据不足
          let arr = new Array(patientNumber - uniqByArr?.length).fill({});
          let flattenArr2 = [...uniqByArr, ...arr];
          return this.$lodash.chunk(flattenArr2, patientInfo.showColNums);
        }
      }
    },

    //等待就诊的患者
    waitingPatientSummaryInfosWest() {
      let devType = this.devType;
      let {patientInfo} = this.optionsInfo;
      let WaitingPatientList = this.$store.getters["getWaitingPatienttAllInfo"];
      let westernMedicineQueue = [];
      let traditionalMedicineQueue = [];
      let tempList = Array();
      if (devType) {
        tempList = WaitingPatientList.apiData;
      } else {
        tempList = WaitingPatientList.mockData;
      }
      tempList.forEach((item) => {
        if (item.registerObjSimpleName === "西药") {
          westernMedicineQueue.push(item);
        } else if (item.registerObjSimpleName === "中药") {
          traditionalMedicineQueue.push(item);
        }
      });
      let summary = this.$lodash.map(westernMedicineQueue, "waitPatientList");
      let flattenArr = this.$lodash.flattenDeep(summary);
      let uniqByArr = this.$lodash.uniqBy(flattenArr, "queuingId");
      let patientNumber =
          (patientInfo.showColNums = 2 || 2) * (patientInfo.showRowNums || 5);
      // 滚动状态
      if (patientInfo.westScroll) {
        if (uniqByArr?.length >= patientNumber) {
          let remainder =
              (uniqByArr.length - patientNumber) % patientInfo.showColNums;
          if (!!remainder) {
            let number =
                patientInfo.showColNums - remainder > 0
                    ? patientInfo.showColNums - remainder
                    : 0;
            let arr = new Array(number).fill({});
            let flattenArr2 = [...uniqByArr, ...arr];
            return this.$lodash.chunk(
                flattenArr2,
                patientInfo.showColNums || 2
            );
          } else {
            let flattenArr2 = [...uniqByArr];
            return this.$lodash.chunk(
                flattenArr2,
                patientInfo.showColNums || 2
            );
          }
        } else {
          let arr = new Array(patientNumber - uniqByArr?.length).fill({});
          let flattenArr2 = [...uniqByArr, ...arr];
          return this.$lodash.chunk(flattenArr2, patientInfo.showColNums);
        }
      } else {
        // 非滚动状态--数据足够
        if (uniqByArr?.length > patientNumber) {
          let sliceArr = uniqByArr.slice(0, patientNumber);
          return this.$lodash.chunk(sliceArr, patientInfo.showColNums || 2);
        } else {
          // 非滚动状态--数据不足
          let arr = new Array(patientNumber - uniqByArr?.length).fill({});
          let flattenArr2 = [...uniqByArr, ...arr];
          return this.$lodash.chunk(flattenArr2, patientInfo.showColNums);
        }
      }
    },

    // 设置宽度和字号
    setFlex() {
      return function (item, val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "flex", item.flex || 1);
            Reflect.set(Obj, "fontWeight", info.queueInfo.headFontWeight);
            Reflect.set(Obj, "color", info.queueInfo.headerColor);
            Reflect.set(Obj, "background", info.queueInfo.headerBackground);
            Reflect.set(Obj, "fontSize", pxToVw(info.queueInfo.headerFontSize));
            return Obj;
          case "list":
            console.log(info.areaHeight - 120)
            Reflect.set(Obj, "flex", item.flex || 1);
            Reflect.set(Obj, "fontWeight", info.queueInfo.listFontWeight);
            Reflect.set(Obj, "fontSize", pxToVw(info.queueInfo.listFontSize));
            Reflect.set(Obj, "background", info.queueInfo.listBackground);
            Reflect.set(Obj, "color", info.queueInfo.listColor);
            Reflect.set(Obj, "height", pxToVw((info.areaHeight - 120) / 5));
            return Obj;
        }
      };
    },

    // 拼接显示具体内容
    getColContent() {
      return function (val, key) {
        return val[key] || "\u00a0";
      };
    },

    // 当前就诊的患者|| 医生暂停接诊
    getCurrentPatient() {
      return function (val) {
        /**
         * 在线状态 0在线 1暂停 2退出
         **/
        const self = this;
        let {patientOrderNo = false} = self.optionsInfo || Array();
        let type = parseInt(val.onlineStatus);
        switch (type) {
          case 0:
          case 2:
            if (!!val.treatingPatient && !!val.treatingPatient.length) {
              let currentPatient = Array();
              val.treatingPatient.forEach((item) => {
                let patientOrderNoInfo = `<span class="${
                    patientOrderNo ? "patient-orderNo" : "patient-orderNo2"
                }">${item.orderNo || "\u00a0"}</span>`;
                let temp = `${patientOrderNoInfo} ${
                    item.patientName || "\u00a0"
                }`;
                currentPatient.push(temp);
              });
              return this.$lodash.join(currentPatient, " ");
            } else {
              return "\u00a0";
            }
          case 1:
            return "暂停接诊";
        }
      };
    },

    // 获候诊的患者
    getWaitingContent() {
      return function (item) {
        const self = this;
        let {patientOrderNo = false} = self.optionsInfo || Array();
        let patientOrderNoInfo = `<span class="${
            patientOrderNo ? "patient-orderNo" : "patient-orderNo2"
        }">${item.orderNo || "\u00a0"}</span>`;
        let temp = `${patientOrderNoInfo} ${item.patientName || "\u00a0"}`;
        let temps = this.$lodash.trim(temp);
        return temps;
      };
    },
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      // alert(key);
      switch (key) {
        case "patientListInfo":
          let patientList = this.$lodash.cloneDeep(data);
          buildParent.executeParentMethod(
              "writeLog",
              JSON.stringify({sign: "模板-患者信息", key: key, data: data})
          );
          this.$store.dispatch("setWaitingPatientInfo", patientList);
          break;
        case "indPatientInfo":
          let indPatientList = this.$lodash.cloneDeep(data);
          this.$store.dispatch("setWaitingPatientAllInfo", indPatientList);
          break;
        case "openMsgWin":
          // alert("openMsgWin", data);
          this.layerInfo = data;
          this.showLayer = true;
          console.log(data, "sdfd12121");
          // this.openMsgWin(data)
          break;
        case "closeMsgWin":
          this.showLayer = false;
          console.log(data, "关闭弹窗");
          break;
      }
    },

    // 等待候诊滚动结束
    handleScrollEnd(e, row) {
      const self = this;
      if (self.$refs[`scroll-${row.workerId}`]) {
        self.$nextTick(() => {
          self.$refs[`scroll-${row.workerId}`][0] &&
          self.$refs[`scroll-${row.workerId}`][0].reset();
        });
      }
    },
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-waiting-drugstore-patient-widget {
  color: #333;
  height: auto;
  font-size: 50px;
  overflow: hidden;

  .widget-inside {
    padding: 24px 30px 4px 30px;
    box-sizing: border-box;

    .flex-box {
      .item {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border: none;
        flex-shrink: 0;
      }

      .queue-area {
        border-radius: 20px !important;
        flex-basis: 30%;
        overflow: hidden;
        border-right: 1px #004074 solid;
        margin-right: 20px;
        background: white;

        //左侧顶部
        .header-area {
          width: 100%;
          display: flex;
          background: #283A7E;
          color: #fff;
          height: 124px;
          overflow: hidden;
          border: none !important;

          .item {
            height: 100%;
            text-align: center;
            @include singleEllipsis(100%);
            align-content: center;
            display: flex;
            justify-content: center;
          }

          .room-number {
            background: #1A265C;
          }
          .current-patient {
            color: #94F7FC;
          }
        }

        .list-area {
          width: 100%;
          display: flex;
          height: calc(100% - 124px);
          background: white;
          flex-direction: column;
          overflow: hidden;
          background: linear-gradient(135deg, #00477D 0%, #005CB0 100%);

          .queue-item {
            display: flex;
            width: 100%;
            align-items: center;
            align-self: center;
            flex-direction: unset;
            flex-grow: 1;
            overflow: hidden;

            &:last-child {
              border: none;
            }

            .item {
              display: flex;
              flex: 1;
              height: 100%;
              width: 100%;
              align-self: center;
              align-items: center;
              align-content: center;
              justify-content: center;
              flex-wrap: nowrap;
              white-space: nowrap;
              overflow: hidden;
              line-height: normal;
              border-right: 1px #004074 solid;

              .item-inside-default {
                display: flex;
                height: 100%;
                width: 100%;
                justify-content: left;

                > div {
                  width: 100%;
                  display: flex;
                  align-self: center;
                  justify-content: center;
                }
              }

              .scrollText {
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: left;
                align-items: center;
                align-self: center;
              }

              .scroll-item-inside {
                width: 100%;
              }

              .treating-patient-area {
                width: 100%;
                height: 100%;
                overflow: hidden;
              }

            }

          }
        }
      }

      .wait-area {
        position: relative;
        flex-basis: calc(100% - 40% - 20px);
        border-radius: 12px;
        overflow: hidden;
        background: transparent;

        .layer-blue-area {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #00b0fe 0%, #00aeff 100%);
          box-shadow: inset -6px 8px 51px 0px #00feed;
          z-index: 99;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .patient-name {
            font-weight: 600;
            font-size: 200px;
            color: #ffffff;
            text-align: center;
            margin-bottom: 20px;
          }

          .treatment-room-name {
            font-weight: 600;
            font-size: 86px;
            color: #ffffff;
            text-align: center;
          }
        }

        .header-area {
          width: 100%;
          display: flex;
          min-height: 120px;
          flex-basis: 120px;

          border-bottom: 2px rgba(0, 0, 0, 0.1) solid;

          .header-item {
            height: 100%;
            flex: 1;
            flex-direction: unset;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 6px solid rgba(255, 255, 0, 1);
            background-color: transparent;
          }
        }

        .wait-patient-list {
          display: flex;
          justify-content: space-between;
          overflow: hidden;
          height: calc(100% - 120px);

          .content-area-left {
            width: calc(50%);
            padding: 0 8px 0 12px;
            box-sizing: border-box;

            .title {
              height: 92px;
              line-height: 92px;
              text-align: center;
              font-size: 60px;
              color: rgba(73, 255, 0, 1);
            }
          }

          .content-area-right {
            width: calc(50%);
            padding: 0 12px 0 8px;
            box-sizing: border-box;

            .title {
              height: 92px;
              line-height: 92px;
              text-align: center;
              font-size: 60px;
              color: rgba(73, 255, 0, 1);
            }
          }
        }

        .content-area {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          overflow: hidden;
          height: calc(100% - 118px);

          :deep(.scroll) {
            height: 100%;
            width: 100%;
          }

          .scroll-inside {
            display: flex;
            width: 100%;
            height: calc(100%);
            flex-direction: column;
            overflow: hidden;

            .group-info {
              width: 100%;
              overflow: hidden;
              min-height: 88px;
              color: rgba(148, 247, 252, 1);
              @include singleEllipsis(100%);
              display: inline-flex;

              .patient-item {
                align-self: center;
                flex-basis: calc(50%);
                flex-shrink: 0;
                overflow: hidden;
                white-space: nowrap;
                display: flex;
                box-sizing: border-box;
                align-items: center;
                justify-content: flex-start;

                &:first-child {
                  margin-right: 4px;
                }

                &:last-child {
                  margin-left: 4px;
                }
              }
            }
          }

          .wait-patient-wrap {
            display: flex;
            flex-direction: column;

            .content-wait-patient {
              display: flex;
              flex-direction: row;
              width: 100%;
              min-height: 112px;

              .chunk-item {
                min-width: calc(100% / 3);
                height: 100%;
                box-sizing: border-box;
                float: left;
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: center;

                &:nth-child(2n) {
                  border-left: 2px rgba(0, 0, 0, 0.1) solid;
                  border-right: 2px rgba(0, 0, 0, 0.1) solid;
                }
              }

              &:nth-child(2n) {
                background: rgba(248, 248, 248, 1);
              }
            }
          }
        }
      }
    }
  }
}
</style>